<template>
  <div class="target">
    <div class="Home-body">
      <iconisaction @changAction="HandHomeLiover" :isActionIndex="isActionIndex" :region="region"></iconisaction>
      <div class="Home-body-list">
        <ul class="Home-body-list-ul">
          <li
            class="Home-body-list-li"
            v-for="(item, index) in provinces"
            :key="item.id"
            v-show="isActionIndex==index"
          >
            <div class="Home-body-list-li-txt">
              <ul class="Home-body-list-li-txt-infolist">
                <li
                  v-for="(val, indexs) in item.List"
                  :key="indexs"
                  class="Home-body-list-li-txt-info"
                  @mouseover="()=>{HandertxtInfo(indexs,item)}"
                >{{val.name}}</li>
              </ul>
            </div>
            <div class="Home-body-list-li-img">
              <ul class="Home-body-list-li-img-ul">
                <transition-group name="fade" tag="p" mode="in-out">
                  <li
                    class="Home-body-list-li-img-li"
                    v-for="(listItem, index) in item.List"
                    :key="listItem.name+'index'"
                    v-show="item.isAction==index"
                  >
                    <img v-lazy="listItem.img" />
                  </li>
                </transition-group>
              </ul>
            </div>
          </li>
        </ul>
        <ul></ul>
      </div>
    </div>
  </div>
</template>
<script>
import imgtitle from "./imgtitle";
import iconisaction from "./iconisaction";
export default {
  data() {
    return {
      isActionIndex: 1,
      provinces: [
        {
          id: 1,
          List: [
            {
              name: "三亚",
              img: "/img/imgbody1.jpg"
            },
            {
              name: "铂悦海南",
              img: "/img/imgbody2.jpg"
            },
            {
              name: "SONG頌",
              img: "/img/imgbody3.jpg"
            },
            {
              name: "BLOVE彼爱",
              img: "/img/imgbody4.jpg"
            },
            {
              name: "丽江",
              img: "/img/imgbody5.jpg"
            },
            {
              name: "青岛",
              img: "/img/imgbody6.jpg"
            },
            {
              name: "杭州",
              img: "/img/imgbody3.jpg"
            },
            {
              name: "大理",
              img: "/img/imgbody4.jpg"
            }
          ],
          isAction: 1
        },
        {
          id: 2,
          List: [
            {
              name: "三亚",
              img: "/img/imgbody1.jpg"
            },
            {
              name: "铂悦海南",
              img: "/img/imgbody2.jpg"
            },
            {
              name: "SONG頌",
              img: "/img/imgbody3.jpg"
            },
            {
              name: "BLOVE彼爱",
              img: "/img/imgbody4.jpg"
            },
            {
              name: "丽江",
              img: "/img/imgbody5.jpg"
            },
            {
              name: "青岛",
              img: "/img/imgbody6.jpg"
            },
            {
              name: "杭州",
              img: "/img/imgbody.jpg"
            },
            {
              name: "大理",
              img: "/img/imgbody.jpg"
            }
          ],
          isAction: 1
        },
        {
          id: 3,
          List: [
            {
              name: "三亚",
              img: "/img/imgbody1.jpg"
            },
            {
              name: "铂悦海南",
              img: "/img/imgbody2.jpg"
            },
            {
              name: "SONG頌",
              img: "/img/imgbody3.jpg"
            },
            {
              name: "BLOVE彼爱",
              img: "/img/imgbody4.jpg"
            },
            {
              name: "丽江",
              img: "/img/imgbody5.jpg"
            },
            {
              name: "青岛",
              img: "/img/imgbody6.jpg"
            },
            {
              name: "杭州",
              img: "/img/imgbody.jpg"
            },
            {
              name: "大理",
              img: "/img/imgbody.jpg"
            }
          ],
          isAction: 1
        },
        {
          id: 4,
          List: [
            {
              name: "三亚",
              img: "/img/imgbody1.jpg"
            },
            {
              name: "铂悦海南",
              img: "/img/imgbody2.jpg"
            },
            {
              name: "SONG頌",
              img: "/img/imgbody3.jpg"
            },
            {
              name: "BLOVE彼爱",
              img: "/img/imgbody4.jpg"
            },
            {
              name: "丽江",
              img: "/img/imgbody5.jpg"
            },
            {
              name: "青岛",
              img: "/img/imgbody6.jpg"
            },
            {
              name: "杭州",
              img: "/img/imgbody.jpg"
            },
            {
              name: "大理",
              img: "/img/imgbody.jpg"
            }
          ],
          isAction: 1
        },
        {
          id: 5,
          List: [
            {
              name: "三亚",
              img: "/img/imgbody1.jpg"
            },
            {
              name: "铂悦海南",
              img: "/img/imgbody2.jpg"
            },
            {
              name: "SONG頌",
              img: "/img/imgbody3.jpg"
            },
            {
              name: "BLOVE彼爱",
              img: "/img/imgbody4.jpg"
            },
            {
              name: "丽江",
              img: "/img/imgbody5.jpg"
            },
            {
              name: "青岛",
              img: "/img/imgbody6.jpg"
            },
            {
              name: "杭州",
              img: "/img/imgbody.jpg"
            },
            {
              name: "大理",
              img: "/img/imgbody.jpg"
            }
          ],
          isAction: 1
        },
        {
          id: 6,
          List: [
            {
              name: "三亚",
              img: "/img/imgbody1.jpg"
            },
            {
              name: "铂悦海南",
              img: "/img/imgbody2.jpg"
            },
            {
              name: "SONG頌",
              img: "/img/imgbody3.jpg"
            },
            {
              name: "BLOVE彼爱",
              img: "/img/imgbody4.jpg"
            },
            {
              name: "丽江",
              img: "/img/imgbody5.jpg"
            },
            {
              name: "青岛",
              img: "/img/imgbody6.jpg"
            },
            {
              name: "杭州",
              img: "/img/imgbody.jpg"
            },
            {
              name: "大理",
              img: "/img/imgbody.jpg"
            }
          ],
          isAction: 1
        }
      ],
      region: [
        {
          id: 1,
          Country: "国内",
          icon: "/img/place.png"
        },
        {
          id: 2,
          Country: "亚洲",
          icon: "/img/place.png"
        },
        {
          id: 3,
          Country: "欧洲",
          icon: "/img/place.png"
        },
        {
          id: 4,
          Country: "大洋洲",
          icon: "/img/place.png"
        },
        {
          id: 5,
          Country: "非洲",
          icon: "/img/place.png"
        },
        {
          id: 6,
          Country: "美洲",
          icon: "/img/place.png"
        }
      ]
    };
  },
  methods: {
    HandertxtInfo(index, item) {
      item.isAction = index;
    },
    HandHomeLiover(index) {
      this.isActionIndex = index;
    }
  },
  components: {
    imgtitle,
    iconisaction
  }
};
</script>
<style lang="scss">
.target {
  margin-bottom: 60px;
  height: 380px;
  .Home-img {
    margin: 80px auto;
  }
  .Home-body {
    .Home-body-list {
      .Home-body-list-ul {
        height: 80px;
        line-height: 80px;
        .Home-body-list-li {
          .Home-body-list-li-txt {
            .Home-body-list-li-txt-infolist {
              display: flex;
              justify-content: center;
              .Home-body-list-li-txt-info {
                cursor: pointer;
                font-size: 16px;
                margin: 0px 20px;
              }
            }
          }
          .Home-body-list-li-img {
            .Home-body-list-li-img-ul {
              display: flex;
              justify-content: center;
              position: relative;
              left: 0px;
              right: 0px;
              margin: 0px auto;
              height: 235px;
              .Home-body-list-li-img-li {
                height: 235px;
                position: absolute;
                top: 0px;
                left: 0px;
                right: 0px;
                bottom: 0px;
                margin: auto;
                display: flex;
                justify-content: center;
                img {
                  display: block;
                  height: 235px;
                  width: 1300px;
                  overflow: hidden;
                }
              }
            }
          }
        }
      }
    }
  }
  .fade-enter {
    opacity: 0;
  }
  .fade-enter-active {
    transition: all 5s;
  }
  .fade-leave-to {
    opacity: 0;
  }
  .fade-leave-active {
    transition: all 1s;
  }
}
</style>